<template>
  <div class="index-page">
    <!-- search-bar -->
    <div class="search-bar">
      <van-row>
        <van-col span="2">
          <img :src="locationIcon" class="location-icon">
        </van-col>
        <van-col span="18">
          <input class="search-input">
        </van-col>
        <van-col span="4">
          <van-button size="mini" class="search-button">搜索</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- swipe -->
    <div class="swiper-area">
      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="(banner, index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- category-bar -->
    <div class="category-bar">
      <div class="category-item" v-for="(categoryItem, index) in category" :key="index">
        <img v-lazy="categoryItem.image" class="category-image">
        <span class="category-name" v-html="categoryItem.mallCategoryName"></span>
      </div>
    </div>
    <!-- ad banner -->
    <div class="ad-banner">
      <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>
    <!-- recommend goods area -->
    <div class="recommend-area">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(recommendGood, index) in recommendGoods" :key="index">
            <div class="recommend-item">
              <img :src="recommendGood.image" alt="" width="80%">
              <div>{{recommendGood.goodsName}}</div>
              <div>￥{{recommendGood.price}} (￥{{recommendGood.mallPrice}})</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import URL from '@/serverAPI.config.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      locationIcon: require('@/assets/images/location.png'),
      bannerPicArray: [],
      category: [],
      adBanner: '',
      swiperOption: {
        slidesPreview: 3
      },
      recommendGoods: []
    }
  },
  created () {
    axios({
      url: URL.getShopingMallInfo,
      // url: 'https://www.easy-mock.com/mock/5ae2eeb23fbbf24d8cd7f0b6/SmileVue/index',
      method: 'get'
    }).then(response => {
      this.category = response.data.data.category // 商品分类
      this.adBanner = response.data.data.advertesPicture // 广告
      this.bannerPicArray = response.data.data.slides // 轮播图片
      this.recommendGoods = response.data.data.recommend // 推荐商品
    }).catch(error => {
      console.log(error)
    })
  }
}

</script>
<style scoped>
.index-page{
  background-color: #EFEFEF;
}
/*search-bar*/
.search-bar{
  height: 2.2rem;
  line-height: 2.2rem;
  overflow: hidden;
  background-color: #e5017d;
}
.search-input{
  width: 100%;
  height: 1.3rem;
  border: 0;
  border-bottom: 1px solid #fff;
  background-color: #e5017d;
}
.location-icon{
  padding-top: .5rem;
  margin-left: .2rem;
  width: 1.5rem;
  height: 1.5rem;
}
.search-button{
  margin-left: .1rem;
}

/*swiper-area*/
.swiper-area{
  clear: both;
  max-height: 15rem;
  overflow: hidden;
}

/*category-bar*/
.category-bar{
  margin: .3rem .2rem;
  padding: .3rem 0;
  display: flex;
  flex-wrap: nowrap;
  font-size: 12px;
  border-radius: .3rem;
  background-color: #fff;
  overflow: hidden;
}
.category-item{
  flex: 1;
  padding: .2rem;
  text-align: center;
}
.category-image{
  width: 80%;
  margin-bottom: .1rem;
}
.category-name{
  height: .8rem;
  line-height: .8rem;
  font-size: .6rem;
}

/* recommend-area */
.recommend-area{
  background-color: #fff;
  margin-top: .3rem;
}
.recommend-title{
  border-bottom:1px solid #eee;
  font-size:14px;
  padding:.2rem;
  color:#e5017d;
}
.recommend-body{
  border-bottom: 1px solid #eee;
}
.recommend-item{
  width:99%;
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
}
</style>
